<template>
	<view class="content">
		<view class="ListGroup" v-for="(item, index) in goodList" :key="index">
			<view class="topView">
				<view class="lab1" v-if="item.carType == 1">{{i18n.booking}}</view>
				<view class="lab1" v-else>{{i18n.retail}}</view>
				<view class="lab2" @click="btnDetAll(item.carType,index)">
					<uni-icons type="trash" color="#ccc" size="13"></uni-icons>{{i18n.clear}}
				</view>
			</view>
			<view class="empty" v-if="item.list.length == 0">
				<view>
					<image class="empty-img" src="../../static/emptyCart.png"></image>
				</view>
				<view>
					<view class="empty-text">{{i18n.empty}}<view class="btnAddGood" @click="gotoAddGood">
						{{i18n.shopping}}
					</view></view>
					<!-- <button class="empty-btn" @click="onClickSee">去逛逛</button> -->
				</view>
			</view>
			<view v-else class="goodList">
				<view class="vailable" v-for="(sonItem, sonIndex) in item.list" :key="sonIndex">
					<view class="goodsItem">
						<view class="check" @tap.stop="selectCheckItem(index,sonIndex,sonItem.isChecked)">
							<uni-icons :type="sonItem.isChecked?'checkbox-filled':'circle'" :color="sonItem.isChecked?'#5360FF':'#ccc'" size="24"></uni-icons>
						</view>
						<view class="goodsInfo">
							<view class="img-box">
								<image mode="aspectFill" :src="sonItem.pic" class="img" />
								
								<!-- izWarning 零售，1为要显示，0为不显示 -->
							    <view class="backView" v-if="item.izWarning == 'all_select'">
							        {{i18n.surplus}}{{sonItem.stock}}{{i18n.piece}}
							    </view>
							</view>
							<view class="text-box">
								<view class="two-omit  ellipsis--2">
									{{sonItem.goodsName}}
								</view>
								<view class="sizeG">
									<view class="goods-title">
										<view class="goods-lable">
											{{i18n.size}}:{{sonItem.size.data[0].value}}
										</view>
										<view class="goods-price">¥ {{sonItem.price}}</view>
									</view>
									<view class="itemBottom">
										<numbox  :title="sonItem.num" @clickLeft="btnNumboxDetClick(index,sonIndex)" @clickRight="btnNumboxAddClick(index,sonIndex)"></numbox>
									</view>
								</view>
							</view>
						</view>
		
		
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="jiesuan-box">
				
				<view @tap.stop="selectAll(index,item.isChecked)" class="all_select_box" >
		
					<uni-icons :type="item.isChecked?'checkbox-filled':'circle'" :color="item.isChecked?'#5360FF':'#ccc'" size="24"></uni-icons>
		
					<view class="all_select">{{i18n.all}}</view>
				</view>
				<view class="rightBtn">
					<view class="total"> <text>{{i18n.total}}</text>￥{{item.showPrice}}</view>
					<view class="to-pay-btn" @tap="toPayOrder(index)">
						{{i18n.submit}}
					</view>
				</view>
			
			</view>
		</view>
		<goodsNecessary  ref='needGoods' @clickReload='listStus'></goodsNecessary>
	</view>
</template>

<script>
	const globalData = getApp().globalData
	import goodsNecessary from '@/components/goodsNecessary/goodsNecessary.vue'
	import numbox from '@/components/numbox/numbox.vue'
	// import uniIcons from '../../components/uni-icons/uni-icons.vue'
	import {listCar,clearCar,editCar} from '../../api/index.js'
	export default {
		data() {
			return {
				//底部结算属性
				allChecked: false, //
				totalPrice: 0.00, //合计
				totalNum:0,
				userId:undefined,
				AppLogin:false,
				isRefresh:true,
				goodList:[],
				stuId:'',
				msgDict:{}
				
			}
		},
		computed: {
		  i18n() {
		    return globalData.$t('cart')
		  }
		},
		onShow(){
			this.userId = getApp().globalData.userId
			this.stuId = getApp().globalData.stuId
			let AppLogin  = getApp().globalData.AppLogin;
			this.AppLogin = AppLogin;
			if (AppLogin&&this.stuId.length>0) {
				
				   this.listStus();
			
			}else{
				
				this.goodList = [{carType:'2',list:[],isChecked:false,showPrice:0.00}];
				
			}
		},
		onLoad() {
			this.msgDict = getApp().globalData.$t('cart');
		},
		onPullDownRefresh() {
			this.listStus();
		},
		methods: {
			
			async listStus(){
				
				let {result} = await listCar({userId:this.userId,carType:3,studentId:this.stuId},false);
				
			    this.goodList = result.map(v=>{
					
					
					
					v.isChecked = false
					v.showPrice =0.00;
					if (v.list != null) { 
						v.list.map(v1=>{
							v1.isChecked = false
							return v1
						})
					   return v 
					}
					
					
				});

				uni.stopPullDownRefresh()
			
			},
			async newclearCar(type,index){
				try{
				let res = await clearCar({userId:this.userId,carType:type,studentId:this.stuId},false);
                
				this.goodList[index].list=[];
				this.goodList[index].isChecked =false;
				this.goodList[index].showPrice =0.00;
				
				uni.showToast({
					title:'删除成功',
					icon:'none'
				})
				
				} catch(err) {
                	console.log('我请求啦',err);
                	uni.showToast({
                		title:err.message,
                		icon:'none'
                	})
                }
			},
			async newEditCar(sonItem,btnType,faindex,sonIndex){
				try{
			    
				if(btnType == 'add'){
					//加
					let  num = sonItem.num+1;
					let res = await editCar({carDetailId:sonItem.carDetailId,userId:this.userId,carType:this.goodList[faindex].carType,studentId:this.stuId,num:num},false);
					sonItem.num = num
					
					if(sonItem.isChecked){
						
						let  showPrice = this.goodList[faindex].showPrice ;
						let endPrice = parseFloat(showPrice) + parseFloat(sonItem.price)
						this.goodList[faindex].showPrice = endPrice.toFixed(2);
					}
					
				}else{
					//减
					
					let  num = sonItem.num-1;
					let res = await editCar({carDetailId:sonItem.carDetailId,userId:this.userId,carType:this.goodList[faindex].carType,studentId:this.stuId,num:num},false);
					
					
					
					if(sonItem.isChecked){
						let  showPrice = this.goodList[faindex].showPrice ;
						let endPrice = parseFloat(showPrice) - parseFloat(sonItem.price);
						this.goodList[faindex].showPrice = endPrice.toFixed(2)
						 
						
					}
					
					if(num <=0){
						let endArr = this.goodList[faindex].list.splice(sonIndex,1)
					}else{
						sonItem.num = num
					}
					
					
						
				}
				
				
				// this.goodList[index].list=[];
				// this.goodList[index].isChecked =false;
				// this.goodList[index].showPrice =;
				
				// uni.showToast({
				// 	title:'成功',
				// 	icon:'none'
				// })
				
				} catch(err) {
			    	console.log('我请求啦',err);
			    	uni.showToast({
			    		title:err.message,
			    		icon:'none'
			    	})
			    }
			
			
			},
			//全选
			selectAll(index,isChecked){
				
				
				this.goodList[index].isChecked=!isChecked
				
				if (isChecked) {
					this.goodList[index].list.map(v=>{
						v.isChecked = !isChecked
					})
					this.goodList[index].showPrice = '0.00';	
				} else{
					let showPrice = 0.00;
					this.goodList[index].list.map(v=>{
						v.isChecked = !isChecked
						showPrice = showPrice + v.num*v.price;
						
					})
					this.goodList[index].showPrice = showPrice.toFixed(2);
				
				}
			
				
			},
			//修改item的选择框
			
			
			selectCheckItem(index,sonIndex,checkType){
				if (checkType && this.goodList[index].isChecked) {
					this.goodList[index].isChecked = !checkType
					// this.goodList[index].list[sonIndex].isChecked = false
					
					 let showPrice = 0.00;
					 this.goodList[index].list.forEach((v,i)=>{
						
						if (sonIndex == i) {
							
					    v.isChecked = false
							
						}else{
							showPrice = showPrice + v.num*v.price;
						}
					})
					
					 this.goodList[index].showPrice = showPrice.toFixed(2);
					
				} else{
					this.goodList[index].list[sonIndex].isChecked = !checkType
					let result1 =  this.goodList[index].list.every(v=>{
						
						return v.isChecked == !checkType
					})
					
					if (result1) {
						
					this.goodList[index].isChecked  = !checkType
					}
				
				    let showPrice = 0.00;
					this.goodList[index].list.forEach((v,i)=>{
						
						if (v.isChecked) {
							
						showPrice = showPrice + v.num*v.price;
							
						}
					})
					this.goodList[index].showPrice = showPrice.toFixed(2);
					
								
				}
		},
			//去结算
		toPayOrder(index){
				
				let item = this.goodList[index];
				if (item.list.length  == 0) {
					
					uni.showToast({
						title:'请先选择商品',
						icon:'none'
					},1000)
					
					return
					
				}

		    let sendType = '2';
			let schoolId = ''
			if (item.carType == '1') {
				
				sendType =item.sendType == '1'?'1':'2'
				schoolId=item.presaleId
			}else{
				schoolId=item.id
			}
			let gitCartList=[];
			if (item.isChecked) {
				gitCartList = item.list;
			} else{
				
				gitCartList = item.list.filter(v=>{
	
					return v.isChecked 
				})
		    }		
			if (gitCartList.length == 0) {
				
				uni.showToast({
					title:'请先选择商品',
					icon:'none'
				},1000)
				
				return
				
			}
			if(item.carType == '1' && item.preRules.length >0 ){
				
				let cartGoodsIds = gitCartList.map(v=>{
					return v.goodsId;
				})
				
				// console.log('cartGoodsIds',cartGoodsIds);
				let needGoodsArr = [];
				item.preRules.forEach(v=>{
					
					let index = cartGoodsIds.indexOf(v.goodsId);
					console.log('index000',index);
					if (index == -1) {
						
						v.needNum=1;
						v.showSizeDict = {} // 必选商品选择的样式
						v.showSizeStr = this.msgDict.choose// 必选商品选择的样式
						needGoodsArr.push(v);
						
					}
					
				})
				
				if (needGoodsArr.length > 0) {
					
				this.$refs.needGoods.openPop(needGoodsArr,item.carId,this.msgDict.choose);
				
				return;	
				}
			
			}
			
			
			
			uni.navigateTo({
				url:'../waitPay/waitPay?cartList='+encodeURIComponent(JSON.stringify(gitCartList))+'&cartType='+item.carType+'&showPrice='+item.showPrice+'&orderNum='+gitCartList.length+'&sendType='+sendType+'&schoolId='+schoolId
			})		

		},
		//去购物
			gotoAddGood(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			
			//清空
			btnDetAll(type,index){
				
				let itemList  = this.goodList[index].list;
				
				if (itemList.length == 0) {
					
				  return;
					
				}
				
				uni.showModal({
					content:this.msgDict.emptyCart,
					cancelText:this.msgDict.cancel,
					confirmText:this.msgDict.confirm,
					success: (res) => {
						if (res.confirm) {
							
						this.newclearCar(type,index);
							
						}
					}
				})
				
				
			},
			btnNumboxDetClick(index,sonIndex){
				let  sonItem  = this.goodList[index].list[sonIndex];
				if (sonItem.num <= 0) {
					
					
					return
					
				} else if(sonItem.num == 1){
					
					
					
					uni.showModal({
						title:'注意',
						content:'您是要删除商品吗?',
						cancelText:'取消',
						confirmText:'确定',
						success: (res) => {
							if (res.confirm) {
								this.newEditCar(sonItem,'det',index,sonIndex)
						
							}
						}
						
						
						
					})
					
					
					
					
					
				}else{
					this.newEditCar(sonItem,'det',index,sonIndex)
					
				}
			},
			btnNumboxAddClick(index,sonIndex){
				
				let  sonItem  = this.goodList[index].list[sonIndex];
				console.log('asdsd',sonItem);
				if (sonItem.size.data.stock <= sonItem.num) {
					
					uni.showToast({
						title:'该商品限购'+sonItem.size.data.stock + '件',
						icon:'none'
					})
					
				} else{
					
					this.newEditCar(sonItem,'add',index,sonIndex)
					
				}
				
				
			}
		},
		filters:{
			getNameType: function(param) {
				 
				  if (param == '1') {

					 return this.i18n().booking;
				  } else{
					 return this.i18n().retail;
				  }
		
				 
				}
		},
		components:{
			numbox:numbox,
			goodsNecessary:goodsNecessary
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #f2f2f2;
		height: 100%;
	}
	
    .content{
	 
		// background-color:#F6F6F6;
		padding: 20rpx 20rpx 200rpx;
		
		.ListGroup{
			// margin-top: 20rpx 20rpx 0; 
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			
			.topView{
				display: flex;
				justify-content: space-between;
				height: 90rpx;
				font-size: 30rpx;
				line-height: 90rpx;
				margin:0 10rpx;
				border-bottom:  1rpx solid #f2f2f2;
				
				.lab1{
					font-size: 32rpx;
					color: #333;
				}
				.lab2{
					color: #B0B0B8;
					font-size:24rpx;
					
					.uni-icon{
						margin-right: 15rpx;
						position: relative;
						top: 7rpx;
					}
				}
			}
			
		}
		
		.empty {
			margin-top: 40rpx;
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// background: #F4F4F4;
		
			.empty-img {
				margin-top: 40upx;
				width: 163upx;
				height:166upx;
			}
		
			.empty-text {
				margin-top: 10upx;
				font-size: 24upx;
				color: #ccc;
				display: flex;
				align-items: center;
				.btnAddGood{
					color: #333;
				}
			}
		
			.empty-btn {
				margin-top: 24upx;
				width: 250upx;
				height: 70upx;
				font-size: 26upx;
				color: #FFFFFF;
				background-color: #C24E4E;
			}
       }
	   .jiesuan-box {
		margin-top: 60rpx;
	   	display: flex;
	   	justify-content: space-between;
	   	width: 100%;
	   	height: 120upx;
	   	
	   	border-top: 1px solid #f2f2f2;
	   
	  
	   
	   		.all_select_box {
	   			width: 160rpx;
	   			height: 100%;
	   			display: flex;
	   			align-items: center;
				margin-left: 20rpx;
	   
	   			.all_select {
	   				flex: 1;
	   				padding-left: 30upx;
					color: #666;
					font-size: 30rpx;
	   			}
	   		}
				
	        .rightBtn{
				display: flex;
				align-items: center;
				
				.total {
					// display: flex;
					// align-items: flex-start;
					color: #F54353;
					font-size: 30rpx;
					
					
				    text{
						color: #333;
						font-size: 30rpx;
					}
				}
				.to-pay-btn {
					width: 160upx;
					text-align: center;
					height: 76rpx;
					line-height: 76upx;
					border-radius: 38rpx;
					font-size: 30upx;
					color: #ffffff;
					background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
					margin-left: 20rpx;
				}
				
			}

	   	
	   }
	   
	   .goodsItem {
	   	// background-color: #007AFF;
	   	height: 240upx;
	   	display: flex;
	   	flex-direction: row;
	   	.check {
	   		display: flex;
	   		align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 100%;
	   	}
	   
	   	.goodsInfo {
	   		display: flex;
	   		flex-direction: row;
	   		align-items: center;
	   		justify-content: space-between;
	   
	   		// border-bottom: 1upx solid #ccc;
	   		// margin-top: 20upx;
	   		// margin-bottom: 20upx;
	   		.img-box {
	   			// display: flex;
	   			// flex-direction: column;
	   			width: 200upx;
	   			height: 200upx;
	   			background-color: #d8d8d8;
	   			margin-left: 20upx;
				position: relative;
	            overflow: hidden;
				border-radius: 20rpx;
	   			.img {
	   				width: 100%;
	   				height: 100%;
	   			}
	   
	   			.backView {
	   				position: absolute;
	   				bottom: 0upx;
					right: 0;
	   				width: 200upx;
	   				height:34upx;
	   				background: rgba(0, 0, 0, 0.5);
	   				font-size: 16upx;
	   				font-weight: 300;
	   				color: #FFFFFF;
	   				text-align:center;
					line-height: 30rpx;
	   			}
	   		}
	   
	   		.text-box {
	   			display: flex;
	   			flex-direction:column;
	   			justify-content: space-between;
	   			overflow: hidden;
	   			// background-color: #FAECD8;
	   			margin-left: 20upx;
				height: 200rpx;
				width: 350rpx;
				.two-omit{
					font-size: 32upx;
					color: #333333;
					// padding: 0upx 20upx 10upx 0;
					font-weight: bold;
					min-height: 80rpx;
					
				}
				.sizeG{
					
					flex: 1;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
				}
	   
	   			.goods-title {
	   				display: flex;
					justify-content: space-between;
					flex-direction: column;
	   				// align-items: center;
				
					.goods-price{
						font-size: 28upx;
						color: #F54353;
						font-weight: 400;
						white-space: nowrap;
					}
					.goods-lable {
						background-color: #F5F5F5;
						font-size: 22upx;
						color: #999;
						font-weight: 400;
						padding: 5rpx 15rpx;
						border-radius: 16rpx;
						
						
					}
	   			}
	   
	   			.itemBottom {
	   				// margin-top: 20upx;
	   				display: flex;
	   				// align-items: center;
					// justify-content: space-between;
					height: 95%;
					flex-direction: column-reverse;
	   
	   			}
	   
	   
	   
	   
	   		}
	   	}
	   
	   }
	   
}
</style>
